<style>
.account{
	background-color: #FFFFFF;
	height:500px;
	width:100%;
	float:left;
}
.account_left{
	font-size:14px;
	height:500px;
	border: 2px solid #D3D3D3;
	
}
.money{
	color: #4C4C4C;
    font-family: Arial;
    font-size: 34px;
    font-weight: 400;
    line-height: 40px
	padding-left:20px;
}
.ui-step-fund {
    background: none repeat scroll 0 0 #F5F5F5;
    height: 50px;
    margin-bottom: 30px;
	width:100%;
	border-top: 2px solid #D3D3D3;
}

.ui-step-fund .ui-step-fund-trigger .ui-step-fund-item-current em {
    background: url("./source/plugin/fund/image/1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.ui-step-fund .ui-step-fund-trigger .ui-step-fund-item-current em {
    background: url("./source/plugin/fund/image/1.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
}
.ui-step-fund .ui-step-fund-item em {
    background: url("./source/plugin/fund/image/2.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    color: #FFFFFF;
    margin: 0 5px;
    padding: 2px 6px 5px;
    text-align: center;
}
.ui-step-fund .ui-step-fund-trigger {
    color: #808080;
    font-size: 12px;
    overflow: hidden;
    padding: 18px 4px 0;
}
.ui-step-fund ol li{float:left; margin-right:90px;margin-left:90px;}
.ui-step-fund ol{list-style:none;}
.bo{
	font-weight:bold;padding:10px;margin-left:100px;border-left: 2px solid #D3D3D3;width:80px;
	border-right: 2px solid #D3D3D3;
}
.bo span{margin-left:10px;}
.purchase table{margin-left:100px; margin:0px auto;}
.purchase table tr td{padding:5px; padding-right:30px;}
.purchase table tr{height:60px;}
#price{height:30px;border:1px solid #0077FF; width:80px;}
.mi-button-morange {
    background-position: 0 -299px;
}
#J_submit{
	background: url("./source/plugin/fund/image/2jqIj9rJRR.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
    background-position: 0 -300px;
	border:none;
	color:#FFFFFF;
	width:100px;
	height:30px;
}

</style>
<div class='account'>
	<div class='account_left'>
		<div class='bo'><span>{$lang[43]}</span></div>
		<div class="ui-step-fund">
			<ol class="ui-step-fund-trigger fn-clear">
				<li id='lab1' class="ui-step-fund-item ui-step-fund-item-current fn-left">
					<em>1</em>
					{$lang[44]}
					</li>
				<li id='lab2' class="ui-step-fund-item fn-left">
					<em>2</em>
					{$lang[27]}
				</li>
				<li id='lab3' class="ui-step-fund-item ui-step-fund-item-last fn-left">
					<em>3</em>
					{$lang[45]}
				</li>
			</ol>
		</div>
		<div class='purchase'>
			<table id='tab_1'>
				<tr>
					<td>{$lang[30]}</td>
					<td style='font-weight:bold;'>{$user['balance']}&nbsp;{$lang[13]}</td>
				</tr>
				<tr>
					<td>{$lang[42]}</td>
					<td><input type='text' name='price' id='price'>&nbsp;{$lang[13]}</td>
				</tr>
				<tr>
					<Td colspan='2' align='center'>
						<span class="mi-button mi-button-morange">
							<input id="J_submit" class="mi-button-text" type="submit" value="{$lang[33]}" seed="miButton-J_submit" smartracker="on">
						</span>
					</td>
				</tr>
			</table>
			<table id='tab_2' style='display:none;'>
				<tr>
					<td colspan='4' align='center'><img src='./source/plugin/fund/image/payloading.gif'></td>
				</tr>
				<tr>
					<td colspan='4' align='center'>{$lang[34]}</td>
				</tr>
			</table>
			<table id='tab_3' style='display:none;'>
				<tr>
					<td colspan='4' align='center'><img src='./source/plugin/fund/image/success.gif'></td>
				</tr>
				<tr>
					<td colspan='4' align='center' style='font-weight:bold'>{$lang[35]}</td>
				</tr>
			</table>
		</div>
	</div>
</div>
<script>
function showresult() {
	jQuery("#lab2").removeClass("ui-step-fund-item-current");
	jQuery("#lab3").addClass("ui-step-fund-item-current");
	jQuery("#tab_2").fadeOut(1000);
	jQuery("#tab_3").fadeIn(2000);
}
jQuery = jQuery.noConflict();
jQuery(document).ready(function() {
	jQuery("#J_submit").click(function() {
		price = jQuery("#price").val();
		if(price == '') {
			alert('{$lang[36]}');
			return false;
		}
		jQuery.ajax({
			url : "plugin.php",
			type : "post",
			dataType: "html",
			data : {
				id : 'fund:ajax',
				act : 'draw',
				price : price
			},
			success : function (data) {
				if(data != 'success') {
					alert(data);
					return false;
				}
				jQuery("#lab1").removeClass("ui-step-fund-item-current");
				jQuery("#lab2").addClass("ui-step-fund-item-current");
				jQuery("#tab_1").fadeOut(1000);
				jQuery("#tab_2").fadeIn(2000);
				setTimeout("showresult()",5000);
			}
		})
	
	});

});
</script>